<!DOCTYPE html> 
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0, user-scalable=0" name="viewport" />        
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" /> 
<meta content="telephone=no" name="format-detection" /> 
<title>确认订单</title>
<link rel="stylesheet" href="css/dialogs.css">
</head>
<body>
<div class="container">
	<button id="btn1">弹窗1</button><br><br>
	<button id="btn2">弹窗2</button><br><br>
	<button id="btn3">弹窗3</button><br><br>
	<button id="btn4">弹窗4</button>
</div>

<div class="match-dialog-mask">
	<div class="match-dialog">
		<h3>个人风险等级与产品相符</h3>
		<p>产品风险等级为<i>低风险</i> <br>
			您的风险等级为<i>相对积极型</i> <br>
			您的风险等级与本产品风险等级匹配，可以签约本产品</p>
		<div class="btns-wrap">
			<a href="javascript:;" class="retest">
				重新评测
			</a>
			<a href="javascript:;" class="buy">
				继续购买
			</a>
		</div>
		<div class="close-btn">
			<img src="./images/dialog_close.png" alt="">
		</div>
	</div>
</div>

<!-- 重新测试 -->
<div class="retest-dialog-mask">
	<div class="retest-dialog">
		<h3>请先重新评测个人风险等级</h3>
		<p>本产品需符合“相对保守型”风险承受能<br>力，但您的风险评测等级已过期，请重<br>
		新评测后继续购买。</p>
		<a href="javascript:;" class="start-retest">开始测评</a>
		<div class="close-btn">
			<img src="./images/dialog_close.png" alt="">
		</div>
	</div>
</div>


<div class="test-dialog-mask">
	<div class="test-dialog">
		<h3>提示</h3>
		<p>您还未完成风险等级评测，请评测后尝<br>试继续购买</p>
		<a href="javascript:;" class="start-test">开始测评</a>
		<div class="close-btn">
			<img src="../images/dialog_close.png" alt="">
		</div>
	</div>
</div>

<!-- 不符 -->
<div class="nomatch-dialog-mask">
	<div class="nomatch-dialog">
		<h3>个人风险等级与产品不符</h3>
		<p>产品风险等级为<i>低风险</i> <br>
			您的风险等级为<i>相对积极型</i> <br>
			您的风险等级与本产品风险等级不匹配,<br>请重新测评后尝试继续签约</p>
		<a href="javascript:;" class="restart-test">重新测评</a>
		<div class="close-btn">
			<img src="./images/dialog_close.png" alt="">
		</div>
	</div>
</div>

<script src="js/lib/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="js/lib/hammer.min.js" type="text/javascript"></script>
<script src="js/lib/jquery.hammer.js" type="text/javascript"></script>
<script>
var dialogs={
	init: function(){
		// 兼容按压效果
		document.body.addEventListener('touchstart', function () { //...空函数即可
		});
	},
	events: function(){
		$('#btn1').hammer().on('tap',function(){
			$('.match-dialog-mask').show(1);
		});
		$('.match-dialog-mask .close-btn').hammer().on('tap',function(){
			$('.match-dialog-mask').hide(1);
		});
		$('#btn2').hammer().on('tap',function(){
			$('.retest-dialog-mask').show(1);
		});
		$('.retest-dialog-mask .close-btn').hammer().on('tap',function(){
			$('.retest-dialog-mask').hide(1);
		});
		$('#btn3').hammer().on('tap',function(){
			$('.test-dialog-mask').show(1);
		});
		$('.test-dialog-mask .close-btn').hammer().on('tap',function(){
			$('.test-dialog-mask').hide(1);
		});
		$('#btn4').hammer().on('tap',function(){
			$('.nomatch-dialog-mask').show(1);
		});
		$('.nomatch-dialog-mask .close-btn').hammer().on('tap',function(){
			$('.nomatch-dialog-mask').hide(1);
		});
	},
	run: function(){
		this.init();
		this.events();
	}
};
dialogs.run();
</script>
</body>
</html>